<template>
  <div id="account">
    <SearchForm v-model="ruleForm" :dataJ="dataJ" @search-form="searchForm" />
    <BkBtn :btnConfig="btnConfig" />
    <BkTable
      :tableHead="tableJ"
      :tableData="tableData"
      :total="total"
      :page="page"
      @getList="getList"
    >
      <!-- 角色 -->
      <template slot="role" slot-scope="scoped">
        <div>
          {{ setRoleName(scoped.row) }}
        </div>
      </template>
      <!-- 场站 -->
      <template slot="station" slot-scope="scoped">
        <div>
          {{ scoped.row.station.stationName }}
        </div>
      </template>
      <template slot="status" slot-scope="scoped">
        <div>
          <el-switch
            v-model="scoped.row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="1"
            inactive-value="0"
            @change="changeStatus(scoped.row)"
          >
          </el-switch>
        </div>
      </template>
    </BkTable>
    <el-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :title="dialogTitle"
      width="600px"
      :before-close="dialogClosed"
    >
      <el-form
        :inline="true"
        :model="userForm"
        :rules="rules"
        ref="userForm"
        class="el-form-item_block"
      >
        <el-form-item
          label="工号"
          label-width="100px"
          prop="userName"
          class="el-form-item"
        >
          <el-input
            v-model.trim="userForm.userName"
            placeholder="请输入工号"
            maxlength="20"
            show-word-limit
            :disabled="operateType == 'edit'"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item
          label="用户角色"
          label-width="100px"
          prop="roleIds"
          class="el-form-item"
        >
          <el-select
            v-model="userForm.roleIds"
            placeholder="请选择用户角色"
            clearable
            filterable
            multiple
          >
            <el-option
              v-for="item in roleList"
              :key="item.id"
              :label="item.roleName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="姓名"
          label-width="100px"
          prop="nickName"
          class="el-form-item"
        >
          <el-input
            v-model.trim="userForm.nickName"
            placeholder="请输入用户名"
            maxlength="20"
            show-word-limit
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item
          label="所属场站"
          label-width="100px"
          prop="stationId"
          class="el-form-item"
        >
          <el-select
            v-model="userForm.stationId"
            placeholder="请选择所属场站"
            clearable
            filterable
          >
            <el-option
              v-for="item in stationList"
              :key="item._id"
              :label="item.stationName"
              :value="item._id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogClosed" type="info" plain>取消</el-button>
        <el-button @click="submitForm('Form')" type="primary">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  updateUserInfo,
  getRoleLists,
  register,
  updateUser,
  getUserList,
} from "@/api/login";
import { stationLists } from "@/api/stations";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      ruleForm: {},
      page: {
        pageNum: 1,
        pageSize: 10,
      },
      tableData: [],
      total: 0,

      Fn: register,
      userForm: {
        userName: "",
        roleIds: [],
        nickName: "",
        stationId: "",
      },
      rules: {
        userName: { required: true, message: "请输入工号", trigger: "blur" },
        roleIds: {
          required: true,
          message: "请选择用户角色",
          trigger: "change",
        },
        nickName: { required: true, message: "请输入姓名", trigger: "blur" },
        stationId: { required: true, message: "请选择场站", trigger: "change" },
      },
      dialogVisible: false,
      dialogTitle: "新增账号",
      operateType: "",
      roleList: [],
      stationList: [],
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
    btnConfig() {
      return [
        {
          label: "新增账号",
          // permissionValue: "sys:userManage:account:add",
          Fn: this.addAccount,
        },
      ];
    },
    dataJ() {
      return [
        {
          label: "工号",
          prop: "username",
          type: "input",
        },
        {
          label: "用户角色",
          prop: "roleId",
          type: "select",
          options: this.roleList,
          props: {
            label: "roleName",
            value: "_id",
          },
        },
        {
          label: "姓名",
          prop: "username",
          type: "input",
        },
        {
          label: "启用状态",
          prop: "enabled",
          type: "select",
          options: [
            {
              label: "全部",
              value: "",
            },
            {
              label: "启用",
              value: 1,
            },
            {
              label: "停用",
              value: 0,
            },
          ],
        },
        {
          label: "创建时间",
          prop: "createTime",
          type: "daterange",
        },
      ];
    },
    tableJ() {
      return [
        {
          label: "工号",
          prop: "userName",
        },
        {
          label: "姓名",
          prop: "nickName",
        },
        {
          label: "用户角色",
          prop: "role",
          nameSlot: true,
        },
        {
          label: "所属场站",
          prop: "station",
          nameSlot: true,
        },
        {
          label: "启用状态",
          prop: "status",
          nameSlot: true,
        },
        {
          label: "创建时间",
          prop: "createTime",
        },
        {
          label: "操作",
          width: "190px",
          align: "center",
          btnList: [
            {
              name: "编辑",
              type: "text",
              // permissionValue: "sys:userManage:account:edit",
              handleClick: (val) => {
                this.editAccount(val);
              },
            },
            {
              name: "重置密码",
              type: "text",
              // permissionValue: "sys:userManage:account:resetpassword",
              handleClick: (val) => {
                this.resetPwd(val);
              },
            },
            {
              name: "删除",
              type: "text",
              // permissionValue: "sys:userManage:account:delete",
              handleClick: (val) => {
                this.del(val);
              },
            },
          ],
        },
      ];
    },
  },
  created() {
    this.getStationList();
    this.getRolesList();
    this.getList();
  },
  methods: {
    searchForm() {
      this.page.pageNum = 1;
      this.getList();
    },
    getRolesList() {
      let params = {
        pageSize: 100,
        pageNum: 1,
      };
      getRoleLists(params).then((res) => {
        this.roleList = res.records;
      });
    },
    setRoleName(row) {
      let arr = [];
      row.roles.forEach((e) => {
        arr.push(e.roleName);
      });
      return arr.join("、");
    },
    async getStationList() {
      this.stationList = await stationLists();
    },
    getList() {
      let params = {
        ...this.page,
      };
      getUserList(params).then((res) => {
        this.tableData = res.records;
        this.total = res.total;
      });
    },
    addAccount() {
      this.dialogVisible = true;
      this.$refs.userForm.clearValidate();
      this.dialogTitle = "新增账号";
      this.operateType = "add";
    },
    editAccount(val) {
      this.dialogVisible = true;
      this.dialogTitle = "编辑账号";
      this.userForm = val;
      this.Fn = updateUser;
      this.operateType = "edit";
    },
    dialogClosed() {
      this.userForm = this.$options.data().userForm;
      this.$refs.userForm.resetFields();
      this.dialogVisible = false;
    },
    async submitForm() {
      let data = {
        ...this.userForm,
      };
      await this.Fn(data);
      this.$message({
        type: "success",
        message: "新增成功",
      });
      this.dialogClosed();
      this.getList();
    },
    async changeStatus(row) {
      let data = {
        userName: row.userName,
        status: row.status,
      };
      await updateUserInfo(data);
      this.$message({
        type: "success",
        message: "更新成功",
      });
      this.getList();
    },
  },
};
</script>

<style scoped lang="less">
#account {
  padding: 0 20px;
  background: #fff;
}

.el-dialog__footer {
  .el-button--primary {
    background: #165dff;
    color: white;
  }
}
</style>
